<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row v-show="showSearch">
        <el-form :model="state.queryForm"
                 ref="queryRef"
                 :inline="true"
                 @keyup.enter="getDataList">
          <el-form-item label="模型名称"
                        prop="name">
            <el-input placeholder="请输入名称"
                      v-model="state.queryForm.name" />
          </el-form-item>
          <el-form-item label="状态"
                        prop="status">
            <el-select class="w100"
                       clearable
                       v-model="state.queryForm.status">
              <el-option label="启用"
                         :value="0">启用</el-option>
              <el-option label="停用"
                         :value="1">停用</el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="search"
                       type="primary"
                       @click="getDataList">
              查询
            </el-button>
            <el-button icon="Refresh"
                       @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <div class="mb8"
             style="width: 100%">
          <el-button icon="folder-add"
                     type="primary"
                     class="ml10"
                     @click="openAddDialog"
                     v-auth="'management_add'">
            新 增
          </el-button>
          <el-button plain
                     :disabled="multiple"
                     icon="Delete"
                     type="primary"
                     v-auth="'pig_modeManagement_del'"
                     @click="handleDelete(selectObjs)">
            删除
          </el-button>
          <right-toolbar v-model:showSearch="showSearch"
                         :export="'management_export'"
                         @exportExcel="exportExcel"
                         class="ml10 mr20"
                         style="float: right;"
                         @queryTable="getDataList"></right-toolbar>
        </div>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8"
                style="padding: 8px"
                v-for="(item, index) in state.dataList"
                :key="index"
                @click="handleColClick(item.id)">
          <el-card :body-style="{ padding: '10px' }"
                   style="height: 200px">
            <el-row style="padding: 10px">
              <el-col :span="3"><img width="24"
                     src="/img/API管理.png"
                     class="align-image"></el-col>
              <el-col :span="17"><span class="align-text">{{ item.name }}</span></el-col>
              <el-col :span="3"><span class="align-c">{{ item.method }}</span></el-col>
              <el-col :span="1"
                      style="padding-top:2px;">
                <el-dropdown class="dropdown">
                  <img width="5"
                       @click.stop
                       src="/img/more.png" />
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="formDialogRef.openDialog(item.id)">修改</el-dropdown-item>
                      <el-dropdown-item @click="handleDelete([item.id])">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>

              </el-col>

            </el-row>

            <div style="height:95px">
              <div class="timeManage0">
                <time class="time">{{ item.url }}</time>
              </div>
              <div class="timeManage">
                <span style="font-size: 14px;color: #999999;">发布人</span>
                <span style="font-size: 14px;color: #999999;padding-left: 75px">发布时间</span>
              </div>
              <div class="timeManage">
                <span style="font-size: 14px;color: #333333;">{{ item.createBy }}</span>
                <span style="font-size: 14px;color: #333333;padding-left: 80px">{{ item.createTime }}</span>
              </div>
            </div>
<!--            <el-row style="padding: 10px;text-align:center;"-->
<!--                    class="row-border-top clearfix">-->
<!--              <el-col :span="7"><img width="12"-->
<!--                     src="/img/gz.png"-->
<!--                     class="align-imagemenage">关注：<span>0</span></el-col>-->
<!--              <el-col :span="1"-->
<!--                      style="color:#ddd;">|</el-col>-->
<!--              <el-col :span="7"><img width="12"-->
<!--                     src="/img/comment.png"-->
<!--                     class="align-imagemenage">评论：<span>1</span></el-col>-->
<!--              <el-col :span="1"-->
<!--                      style="color:#ddd;">|</el-col>-->
<!--              <el-col :span="8"><img width="12"-->
<!--                     src="/img/ver.png"-->
<!--                     class="align-imagemenage">版本：<span>{{item.version}}</span></el-col>-->

<!--            </el-row>-->
          </el-card>

        </el-col>
      </el-row>
      <pagination @size-change="sizeChangeHandle"
                  @current-change="currentChangeHandle"
                  v-bind="state.pagination" />
    </div>

    <!-- 编辑、新增  -->
    <form-dialog ref="formDialogRef"
                 @refresh="getDataList(false)" />

  </div>
</template>

<script setup lang="ts" name="systemManagement">
import { BasicTableProps, useTable } from '/@/hooks/table';
import {fetchList, delObjs, getObj, getExplain} from '/@/api/model/management';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useDict } from '/@/hooks/dict';
import { useRoute } from 'vue-router';

// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
// 定义查询字典

// 定义变量内容
const formDialogRef = ref();
const dataForm1 = reactive({
	sortid: '',
	sortName: '',
});

const route = useRoute();

dataForm1.sortid = route.query.sortid;
dataForm1.sortName = route.query.sortName;

// 搜索变量
const queryRef = ref();
const showSearch = ref(true);
// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);
// 获取 Vue Router 实例
const router = useRouter();
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		sortId: dataForm1.sortid,
	},
	pageList: fetchList,
});

//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	// 清空多选
	selectObjs.value = [];
	getDataList();
};

// 导出excel
const exportExcel = () => {
	downBlobFile('/pig/modeManagement/export', Object.assign(state.queryForm, { ids: selectObjs }), 'modeManagement.xlsx');
};

// 多选事件
const selectionChangHandle = (objs: { id: string }[]) => {
	selectObjs.value = objs.map(({ id }) => id);
	multiple.value = !objs.length;
};

// 点击列的处理函数  弹出成
const handleColClick = (id: string) => {
  router.push(
      {
        path: '/model/management/explain',
        query: {
          id: id
        },
      },
      () => {
        window.open('/model/management/explain', '_blank');
      }
  );
};

const openAddDialog = () => {
  formDialogRef.value.openDialog(null, dataForm1.sortid);
};

// 编辑对话框
const openEditDialog = (id) => {
	formDialogRef.value.openDialog(id);
};

// 删除操作
const handleDelete = async (ids: string[]) => {
	try {
		await useMessageBox().confirm('此操作将永久删除');
	} catch {
		return;
	}

	try {
		await delObjs(ids);
		getDataList();
		useMessage().success('删除成功');
	} catch (err) {
		useMessage().error(err.msg);
	}
};
</script>
<style>
.item-container {
	display: flex;
	flex-wrap: wrap; /* 如果需要换行，可以启用这个 */
	justify-content: flex-start; /* 控制元素在主轴上的对齐方式 */
}

.item {
	flex: 0 0 calc(33.33% - 10px); /* 假设每个元素之间有10px的间隔 */
	margin-right: 10px;
	margin-bottom: 10px;
	max-width: calc(33.33% - 10px); /* 防止内容撑破容器 */
}

/* 最后一行如果元素不足三个，可以调整它们的样式（可选） */
.item-container .item:nth-child(3n + 1):nth-last-child(-n + 3) {
	/* 针对最后一行第一个元素的样式 */
}

.item-container .item:nth-child(3n + 2):nth-last-child(-n + 2) {
	/* 针对最后一行第二个元素的样式 */
}

.item-container .item:nth-child(3n + 3):nth-last-child(-n + 1) {
	/* 针对最后一行第三个元素的样式 */
}

.align-text {
	width: 192px;
	height: 16px;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 16px;
	color: #409eff;
	line-height: 0px;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.align-c {
	width: 31px;
	height: 16px;
	font-family: Source Han Sans CN, Source Han Sans CN;
	font-weight: 500;
	font-size: 16px;
	color: #2bc8a8;
	line-height: 0px;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.timeManage0 {
	padding: 2px 60px 15px 0;
	padding-left: 60px;
}
.timeManage {
	padding-left: 60px;
}
.row-border-top {
	height: 0px;
	border-top: 1px solid #dddddd;
}
.align-imagemenage {
	display: inline;
	margin-right: 5px;
}
</style>